<template>
    <div>
        <dvi style="cursor:pointer" class="back" @click="showDetail">[返回首页]</dvi>
        
    </div>
      <div class="container">
        <h2>云野先祖位置<br>____________________________</h2>
        <div class="desc">
        <ul>
        <li v-for="(item, index) in pwd4" :key="index"> 
              <img :src="getImgUrl(item.imgs)" alt="" >              
              <span>{{ item.id }}</span>
        </li>
        </ul>
        </div>
      </div>
</template>
    
<script>
import axios from 'axios'
import {ref,onMounted } from 'vue'
import{useRouter} from 'vue-router'

export default {
    setup() {
        const pwd4 = ref(null)
        onMounted(() => {
            axios.get('../public/pwd4.json')
               .then(response => {
                    pwd4.value = response.data
                })
               .catch(error => {
                    console.log(error)
                })
        })
        const router = useRouter()
        const showDetail = () => {
            router.push('/zuye')
        }
        const getImgUrl = (imgs) => {
            //用相对路径
            return new URL('../assets/yunye/' + imgs, import.meta.url).href
        }
       
        return {
            pwd4,
            showDetail,
            getImgUrl
        }
    }
}
    </script>
    
    <style scoped>
    h2{
        font-family: "华文琥珀";
        font-size: 40px;
        color: #FF6600;
        font-weight: normal;
    }
    span{
        font-size: 20px;
        font-family: 隶书;
        color: #333;
        margin-top: 10px;
        align-self: left;
        float: right;

        width: 350px;
        height: 140px;
    }
    .desc ul{
        display: flex;/*设置ul为flex布局*/
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .desc li{
        list-style: none;
        margin-bottom: 20rpx;
        position: relative;
        width: 630px;
        height: 160px;
        font-size: 0px;
        
    }
    img{
        width: 250px;
        height: 150px;
        margin-bottom: 10px;/*图片间距*/
    }
    
    
    </style>